<template>
	<view>
    <view class="title_box">
      <view class="title_inner" @click="changeindex(0)">
        <image class="avatar" mode="aspectFill" src="/static/images/tab_开门_03.png"></image>
        <view class="tipsRed" v-if="leftTitleShow && list.length != 0"></view>
        <text style="padding-top: 20rpx;">通知消息</text>
      </view>
      <view class="title_inner" @click="changeindex(1)">
        <image class="avatar" mode="aspectFill" src="/static/images/物业报修.png"></image>
        <view class="tipsRed2" v-if="rightTitleShow && systemList.length != 0"></view>
        <text style="padding-top: 20rpx;">系统消息</text>
      </view>
    </view>
    
    
    <view class="news-list" v-if="titleIndex == 0">
      <view class="news-item" @longpress="longTap" v-for="(item,index) in list" :key="index" @click="gotodetail(item.id)">
        <view class="item-title">
          {{item.title}}
        </view>
        <view class="item-bot">
          {{item.date}}
          {{item.time}}
        </view>
        <view v-if="item.status == 1" class="newsRed"></view>
      </view>
    </view>
    
    <view class="news-list" v-else>
      <view class="news-item" v-for="(item,index) in systemList" :key="index" @click="gotodetail(item.id)">
        <view class="item-title">
          {{item.title}}
        </view>
        <view class="item-bot">
          {{item.date}}
          {{item.time}}
        </view>
        <view v-if="item.status == 1" class="newsRed"></view>
      </view>
    </view>
    
    <view class="bot">
      已经到底了~
    </view>
    
    
	</view>
</template>

<script>
	export default {
		data() {
			return {
        leftTitleShow: true, //标题栏左侧的红点
        rightTitleShow: true, //标题栏右侧的红点
        titleIndex: 0,
        systemList: [
          // {
          // 	title:"尊敬的用户您好！端午节将至，柴桑国际全体人员祝您端午节快乐！系统消息版",
          //   date: '2023-01-01',
          // 	time:"18:00:00",
          //   status: 1,
          //   id: 210
          // }
        ],
				list: [
					// {
					// 	title:"尊敬的用户您好！端午节将至，柴桑国际全体人员祝您端午节快乐！",
     //        date: '2023-01-01',
					// 	time:"18:00:00",
     //        status: 1,
     //        id: 110
					// }
				]
			}
		},
		onLoad() {	
			this.getNewsList()
		},
		onShow() {
			
		},
		methods: {
      getNewsList(){
        uni.$post(this.path + '/info/query',{
          pageNo: 1,
          pageSize: 100000,
          infoStatus: 1   //$消息状态改一,未修改前是0
        }).then(res => {
          if(res.code == 200){
            // infotype 1是系统消息  0是通知消息
            this.list = []
            this.systemList = []
            console.log('getNewsList',res.data.records);
            res.data.records.forEach(item => {
              if(item.infoType == 1){
                this.systemList.push({
                  title: item.infoTitle,
                  date: item.infoCreateTime.split(' ')[0],
                  time: item.infoCreateTime.split(' ')[1],
                  status: 1,
                  id: item.id
                })
              }else if(item.infoType == 0){
                this.list.push({
                  title: item.infoTitle,
                  date: item.infoCreateTime.split(' ')[0],
                  time: item.infoCreateTime.split(' ')[1],
                  status: 1,
                  id: item.id
                })
              }
            })
            
          }else{
            
          }
        })
      },
      
      longTap(){
        console.log('longTap');
      },
      changeindex(index){
        this.titleIndex = index
      },
      gotodetail(id){
        let leftSum = true //通知消息是否还有没点击的
        let rightSum = true
        if(this.titleIndex == 0){
          for(let i = 0; i < this.list.length; i++){
            if(this.list[i].id == id){
              this.list[i].status = 0
              break
            }
          }
          for(let i = 0; i < this.list.length; i++){
            if(this.list[i].status == 1){
              leftSum = false //没有全部点击过
              break
            }
          }
          console.log('leftSum == 0',leftSum == 0);
          if(leftSum){
            this.leftTitleShow = false
          }
          
          
        }
        if(this.titleIndex == 1){
          for(let i = 0; i < this.systemList.length; i++){
            if(this.systemList[i].id == id){
              this.systemList[i].status = 0
              break
            }
          }
          for(let i = 0; i < this.systemList.length; i++){
            if(this.systemList[i].status == 1){
              rightSum = false
              break
            }
          }
          console.log('rightSum == 0',rightSum == 0);
          if(rightSum){
            this.rightTitleShow = false
          }
          
        }

        
        uni.navigateTo({
          url: './info?id=' + id
        })
      },
      
		},
	}
</script>

<style lang="scss">
  .bot{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #888888;
    padding-bottom: 30rpx;
  }
  
  .news-list{
    padding: 20rpx;
    .news-item{
      position: relative;
      width: 710rpx;
      height: 210rpx;
      border-radius: 16rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      .item-title{
        padding: 15rpx;
        padding-top: 35rpx;
        padding-right: 45rpx;
        color: #24243F;
        font-size: 28rpx;
      }
      .item-bot{
        position: absolute;
        top: 142rpx;
        left: 20rpx;
        font-size: 24rpx;
        color: #9F9F9F;
      }
      .newsRed{
        position: absolute;
        top: 35rpx;
        left: 658rpx;
        height: 18rpx;
        width: 18rpx;
        background-color: #FF1919;
        border-radius: 50%;
        overflow: hidden;
      }

    }
  }

  

  
.title_box {
  position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 710rpx;
  height: 200rpx;
  margin: 30rpx 20rpx 20rpx 20rpx;
  background-color: #fff;
	border-radius: 1rpx;
  .title_inner {
  	display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    image{
      width: 100rpx;
      height: 100rpx;
    }
    text{
      font-size: 28rpx;
      color: #24243F;
    }
  }
  .tipsRed{
    position: absolute;
    width: 22rpx;
    height: 22rpx;
    background-color: #FF1919;
    border-radius: 50%;
    top: 20rpx;
    left: 215rpx;
  }
  .tipsRed2{
    position: absolute;
    width: 22rpx;
    height: 22rpx;
    background-color: #FF1919;
    border-radius: 50%;
    top: 20rpx;
    left: 570rpx;
  }
}

  page{
    background-color: #F6F9FC;
  }

</style>